<template>
    <div class="sortPageLive">
        <!-- 分类 -->

        <div class="box" v-for="(v, index) in newResData" :key="index" @click="fun(v.proid)">
            <img :src="v.img1" />
            <div class="text">
                <p>{{ v.proname }}</p>
                <p> ¥
                    <span>{{ v.originprice }}</span>
                </p>
            </div>

        </div>
    </div>
</template>

<script>
import service from '../../../request/service'

export default {
    data() {
        return {
            newResData: [],
            myCategory: "家电",
            images:[]
        }
    },
    methods:{
        fun(v){
            this.$router.push({path:'/infogoods',query:{id:v}})
        }
    },
    mounted() {
        service({
            url: 'api/pro/list',
            method: 'get',
            params: {
                limitNum: 24,
            }
        }).then(res => {
            this.newResData = res.data.data
        });
       service({
            url: 'http://localhost:3000/classify',
            method: 'get',
        }).then(res => {
            this.images = res.data

        });
        

    }
}
</script>

<style scoped>
.sortPageLive {

    height: 100%;
    background: white;
    column-count: 2;
    column-gap: .5rem;
    padding: .25rem .375rem;
    box-sizing: border-box;
}

.box {
    break-inside: avoid;
    border-radius: .625rem;
    background-color: #fff;
    margin-bottom: .5rem;
}

.box img {
    height: 11rem;
    width: 11rem;
    border-top-left-radius: .625rem;
    border-top-right-radius: .625rem;
}

.text {
    padding: .625rem;
    text-align: left;
    font-weight: bold;
}

.text p:first-child {
    font-size: .875rem;
    word-break: break-all;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.text p:last-child {
    color: #f66;

}
</style>